<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>直播页</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>

    <script>
        window.HELP_IMPROVE_VIDEOJS = false;
    </script>


    <style>
        body,
        html {
            margin: 0 auto;
            padding: 0;
        }

        .vjs-poster {
            background-size: cover;
        }

        .vjs-paused .vjs-big-play-button,
        .vjs-paused.vjs-has-started .vjs-big-play-button {
            display: block;
        }

        /* 按纽变圆形 */
        .video-js .vjs-big-play-button {
            font-size: 2.5em;
            line-height: 2.3em;
            height: 2.5em;
            width: 2.5em;
            -webkit-border-radius: 2.5em;
            -moz-border-radius: 2.5em;
            border-radius: 2.5em;
            background-color: #73859f;
            background-color: rgba(115, 133, 159, .5);
            border-width: 0.15em;
            margin-top: -1.25em;
            margin-left: -1.25em;
        }

        /* 中间的播放箭头 */
        .vjs-big-play-button .vjs-icon-placeholder {
            font-size: 1.63em;
        }

        /* 加载圆圈 */
        .vjs-loading-spinner {
            font-size: 2.5em;
            width: 2em;
            height: 2em;
            border-radius: 1em;
            margin-top: -1em;
            margin-left: -1.5em;
        }

        .vjs-loading-spinner {
            margin-left: -1em;
        }

        #my_video {
            width: 100%;
            margin: 0 auto;
        }
    </style>
</head>

<body>



    <video id="my_video" class="video-js vjs-big-play-centered">
        <p class="vjs-no-js">您的浏览器不支持H5或FLASH</p>
    </video>

    <script src="https://cdn.bootcss.com/videojs-flash/2.1.2/videojs-flash.min.js"></script>

    <script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>

    <link rel="stylesheet" href="plugins/layer_mobile/need/layer.css" />
    <script src="plugins/layer_mobile/layer.js"></script>


    <script>
        $(function () {



            // var innerWidth = window.innerWidth;
            // var myHeight = innerWidth * 0.618;
            // var div = document.getElementById('my_video');
            // div.style.width = innerWidth + 'px';
            // div.style.height = myHeight + 'px';



            //是否为移动端
            function IsMobile() {
                var isMobile = true;
                if (!/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) { //移动端
                    isMobile = false;
                }
                console.log(isMobile, "是否为移动端");
                return isMobile;
            }

            function getUrlParamsMap() {
                var url = location.search; //获取url中"?"符后的字串
                var theRequest = new Object();
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    strs = str.split("&");
                    for (var i = 0; i < strs.length; i++) {
                        theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                    }
                }
                return theRequest;
            };


            // var resetVideoSize = function (myPlayer) {
            //     var videoJsBoxWidth = $("#my_video").width();
            //     var ratio = window.innerWidth / window.innerHeight;
            //     var videoJsBoxHeight = videoJsBoxWidth / ratio;
            //     myPlayer.height(videoJsBoxHeight);
            // }

            var urlMap = getUrlParamsMap();
            console.log(urlMap, 'urlMap');
            videoKey = urlMap['videoKey']
            var machineTypeKey = "mobile_web";

            var isMobile = IsMobile();
            if (!isMobile) {
                machineTypeKey = "pc_web";
            }


            var defaultConfig = {
                "mobile_web": {
                    "channelUrl": "http://pili-live-hls.jsbjyl.com/jsbjyl/test/",
                    "defaultKey": "",
                    "videoType": "hls",
                    "poster": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544552847961&di=d7f9ca1152a95be6aca4622ae9285633&imgtype=0&src=http%3A%2F%2Fimage.bitauto.com%2Fdealer%2Fnews%2F100041504%2F83027edb-d13e-4f01-a9e9-9360dad9fafa.jpg"
                },
                "pc_web": {
                    "channelUrl": "rtmp://pili-live-rtmp.jsbjyl.com/jsbjyl/test/",
                    "defaultKey": "",
                    "videoType": "rtmp/flv",
                    "poster": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544552847961&di=d7f9ca1152a95be6aca4622ae9285633&imgtype=0&src=http%3A%2F%2Fimage.bitauto.com%2Fdealer%2Fnews%2F100041504%2F83027edb-d13e-4f01-a9e9-9360dad9fafa.jpg"

                }
            }

            //用户未传 我们放远程配置的当前
            if (videoKey == "" || videoKey == null) {

                $.getJSON('qiniuConfig.json', function (remoteData) {

                    console.log(remoteData, "remoteData")
                    videoKey = remoteData[machineTypeKey].videoKey || "";
                    if (videoKey == "") {

                        console.log("暂无直播!");

                        layer.open({
                            content: '暂无直播,跳转中...',
                            skin: 'msg',
                            shadeClose: false,
                            time: 1 //2秒后自动关闭
                        });

                        setTimeout(function () {
                            window.location.href = "index.html";
                        }, 1000);

                        // layer.open({
                        //     content: '您确定要刷新一下本页面吗？',
                        //     btn: ['刷新', '关闭'],
                        //     yes: function (index) {
                        //         location.reload();
                        //         layer.close(index);
                        //     },
                        //     no: function (index) {

                        //     }
                        // });

                        return false;
                    }
                    channelUrl = remoteData[machineTypeKey].channelUrl;
                    poster = remoteData[machineTypeKey].poster;
                    videoKey = remoteData[machineTypeKey].videoKey;
                    videoType = remoteData[machineTypeKey].videoType;
                    initPalyer({
                        videoKey: videoKey,
                        machineTypeKey: machineTypeKey,
                        videoType: videoType,
                        channelUrl: channelUrl,
                        poster: poster

                    });
                })
            } else {
                initPalyer({
                    videoKey: videoKey,
                    machineTypeKey: machineTypeKey
                });
            }



            var myPlayer;

            function initPalyer(config) {

                config.channelUrl = config.channelUrl || defaultConfig[config.machineTypeKey].channelUrl;
                config.poster = config.poster || defaultConfig[config.machineTypeKey].poster;
                config.videoType = config.videoType || defaultConfig[config.machineTypeKey].videoType;


                // config.videoType = "hls";

                var options = {
                    poster: config.poster,
                    preload: "auto", // 预加载
                    language: "zh-CN", // 初始化语言
                    playbackRates: [0.5, 1, 1.5, 2], // 播放速度
                    fluid: true,
                    controls: true,
                    type: 'hls', //config.videoType,
                    // techOrder: ['flash', 'html5'],
                    flash: {
                        swf: 'https://cdn.bootcss.com/videojs-swf/5.4.2/video-js.swf'
                    },
                    autoplay: true, // 如为 true，则视频将会自动播放
                    // aspectRatio:'16:9'
                    // controlBar: {
                    //     muteToggle: true,
                    //     volumeMenuButton: false
                    // }
                };

                console.log(config, 'initPalyer.config');
                console.log(options, 'initPalyer.options');

                myPlayer = new videojs('my_video', options, function () {


                    // this.width("80%");
                    // resetVideoSize(myPlayer);

                    var videoUrl;
                    if (config.videoType == 'hls') {

                        videoUrl = config.channelUrl + config.videoKey + '.m3u8';
                    } else {
                        // //config.channelUrl = "http://pili-live-hdl.jsbjyl.com/jsbjyl/test/";
                        // config.channelUrl = "http://pili-live-hls.jsbjyl.com/jsbjyl/test/";
                        videoUrl = config.channelUrl + config.videoKey + '';

                        // videoUrl = "http://pili-live-hls.jsbjyl.com/jsbjyl/test/123.m3u8";
                        // videoUrl = "rtmp://pili-live-rtmp.jsbjyl.com/jsbjyl/test/123";

                        //rtmp://pili-live-rtmp.jsbjyl.com/jsbjyl/test/123 
                    }

                    console.log(videoUrl, "最终播放的url");

                    this.src(videoUrl);
                    this.load(videoUrl);
                    this.play();

                    myPlayer.on('ended', function () {
                        myPlayer.posterImage.show();
                        myPlayer.controlBar.show();
                    });

                    myPlayer.on('pause', function () {
                        console.log(11);
                        myPlayer.posterImage.show();
                        myPlayer.controlBar.show();
                    });


                    // this.enterFullScreen();

                    // $(window).on("resize", function () {
                    //     console.log(3);
                    //     resetVideoSize(myPlayer);
                    // });

                });
            }

        });
    </script>
</body>

</html>